<template>
<div>
  <el-container>
    <el-header class="header" style="text-align: center">
      <h1 style="font-size: 35px;margin: 0px auto">蔚莱停车管理系统
        <span style="float: right;font-size:20px;margin: 15px 10px"><a href="/adminLogin">退出登录</a></span></h1>

    </el-header>
    <el-container class="container">
      <el-aside width="200px" class="el-aside">
        <el-menu
                  router
                 :default-active="$router.currentRoute.path"
                 class="el-menu-vertical-demo"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                  style="text-align: left;"
        >
          <el-menu-item index="/index">
            <i class="el-icon-s-home" ></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools" ></i>
              <span>月租用户管理</span>
            </template>

            <el-menu-item index="/addMonthUser"><i class="el-icon-circle-plus" ></i>添加月租用户</el-menu-item>
            <el-menu-item index="/monthUserTable"><i class="el-icon-s-fold" ></i>月租用户列表</el-menu-item>

          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid" ></i>
              <span>管理员操作</span>
            </template>
            <el-menu-item index="/addAdminUser"><i class="el-icon-s-management" ></i>添加新的管理员</el-menu-item>
            <el-menu-item index="/adminTable"><i class="el-icon-circle-plus" ></i>管理员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-user" ></i>
              <span>黑名单</span>
            </template>
            <el-menu-item index="/blackList"><i class="el-icon-s-management" ></i>系统黑名单</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-order" ></i>
              <span>车位管理</span>
            </template>
            <el-menu-item index="/ParkingSpaceTableOne"><i class="el-icon-circle-plus" ></i>一区车位</el-menu-item>
            <el-menu-item index="/ParkingSpaceTableTow"><i class="el-icon-circle-plus" ></i>二区车位</el-menu-item>
            <el-menu-item index="/ParkingSpaceTableThree"><i class="el-icon-circle-plus" ></i>三区车位</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-ticket" ></i>
              <span>车辆出入模拟</span>
            </template>
            <el-menu-item index="/carIn"><i class="el-icon-circle-plus" ></i>车辆进入模拟</el-menu-item>
            <el-menu-item index="/carOut"><i class="el-icon-remove" ></i>车辆离开模拟</el-menu-item>
          </el-submenu>


        </el-menu>
      </el-aside>
      <el-main class="el-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>
<style>
.header {
  background: cornflowerblue;
}

.container {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-aside {
  background: #545c64;
}
.el-aside i{
  color: white !important;
}
.el-main {

}

.header h1 {
  color: white;
  margin: 15px 30px;
}
</style>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}

</script>
